<template>
<div class="login">
      
      <span class="close">
        <i class="iconicon-test iconfont"></i>
      </span>
      <h2 class="logo">
        <i class="iconnew  iconfont"></i>
      </h2>
      <Myinput 
       
      v-model='user.username'
      placeholder='用户名/手机号码'
        type='text'
       :rules="rules.username"
      msg="手机号输入不合法"
      
      ></Myinput>
      <!-- v-model="user.password"双向绑定父组件输入子组件也可以改变因为传了参数过去 -->
      <Myinput 
      v-model='user.nickname'
      type='text'
      placeholder='昵称'
        :rules="rules.nickname"
      msg="请输入2-10的"
      
      ></Myinput>
      <Myinput 
      v-model='user.password'
      :rules="rules.password"
      type='password'
      placeholder='密码'
       
      msg="密码3-18位"
      
      ></Myinput>
      <!-- 编程式导航，因为封装过全局的直接用就行了 router-link相当于a-->
      <div class="login tips">没有账号？去<router-link  to="/login">登录</router-link></div>
      
      <!-- 自定义组件上的事情，其实都是在自定义组件上做的，就是父组件 -->
      <MyButton type="primary" @click="registerFn">注册</MyButton>
      
  </div>
  
</template>

<script>
import MyButton from '../components/MyButton.vue'
import Myinput from '../components/Myinput.vue'
import {userRegisterAPI} from '../apis/user'
// import {setToken} from '../utils/localData.js'
export default {
components: {
    MyButton,
    Myinput
},
data () {
    return {
        //这个是动态绑定用户名昵称和密码的，就是输入的内容获取
        user:{
            username:'',
            password:'',
            nickname:'',
        },
        //这个是来动态绑定正则的
        rules:{
            username: /^1\d{10}$/,
        password: /^[a-zA-Z0-9~!@#$%^&*()_+=]{3,18}$/,
        nickname: /^.{2,10}$/,
        }
    }
},
methods: {
    registerFn(){
        //判断输入的东西符不符合正则的规矩
        if(
        this.rules.username.test(this.user.username)
        &&this.rules.nickname.test(this.user.nickname)&&
        this.rules.password.test(this.user.password)
        ){
//这个是从服务器拿到数据然后打印出来
            userRegisterAPI(this.user).then((res)=>{
                console.log(res);
                //结构出后端返回来的数据
                const {message} = res.data;
                if(message==='注册成功'){
                    // setToken()
                    this.$toast.success('注册成功')
                    setTimeout(()=>{

                        this.$router.push({path:'/login'});
                    },2000)
                }else{
                    this.$toast.fail(message)
                }
            })
        }else{
            //使用轻提示组件
            this.$toast.fail('请输入正确的用户名或密码或者昵称')
        }
    }
}
}
</script>

<style lang="less" scoped>
.close-btn{
  position: fixed;
  left: 30px;
  top: 30px;
  .iconfont{
    font-size: 30px;
  }
}
.logo{
  display: flex;
  justify-content: center;
  .iconfont{

    color: red;
    font-size: 100px;
  }
}
.tips{
  padding: 20px;
  text-align: right;
}
</style>